const { defineConfig } = require('@vue/cli-service')
const path = require('path')

const cdn = {
  css: ['//unpkg.com/vant@2.12/lib/index.css'],
  js: [
    '//unpkg.com/vue@2.6.14/dist/vue.min.js',
    '//unpkg.com/vue-router@3.5.1/dist/vue-router.min.js',
    '//unpkg.com/vuex@3.6.2/dist/vuex.min.js',
    '//unpkg.com/vant@2.12.54/lib/vant.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js'
  ]
}

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${path.join(
              __dirname,
              './src/assets/style/theme.less'
            )}";`
          }
        }
      }
    }
  },
  configureWebpack: {
    // 外部
    externals: {
      // 左边是报名：使用到的名字
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      vant: 'vant',
      axios: 'axios'
    }
  },
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      cdn: cdn
    }
  }
})
